<template>
  <div class="contain">
    <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
      <el-tab-pane label="裁剪" name="first"><Video v-if="isshow" /></el-tab-pane>
      <el-tab-pane label="拼接" name="second"
        ><VideoJoin v-if="!isshow"
      /></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Video from "./Video.vue";
import VideoJoin from "./VideoJoin.vue";
export default {
  components: {
    Video,
    VideoJoin,
  },
  data() {
    return {
      activeName: "first",
      isshow: true,
      page: 0,
    };
  },
  methods: {
    handleClick(tab, event) {
      if (tab.index == 0 && this.page != 0) {
        this.page = 0;
        this.isshow = true;
      } else if (tab.index == 1 && this.page != 1) {
        this.page = 1;
        this.isshow = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.contain {
  position: relative;
  // height: 100vh;
}
/deep/.el-tabs__header {
  position: absolute;
  top: 20px;
  left: 45%;
  height: 20px;
  .el-tabs__nav-scroll {
    background: #7a7878;
  }
}
</style>
